<template>
	<view class="container">
		<userInfo></userInfo>
		<view class="title">家庭经济状况登记表</view>
		<view class="bigTitle">家庭财产情况</view>
		<view class="lineOptionsBox2">
			<view class="lineOptionsTitle">车辆船舶</view>
			<view class="lineOptionsRight lineOptionsRight2">
				<view class="lineOptionsRightIn" @click="changeStatus('haveTaxi',false)">
					<image class="chooseIcon" v-if="!haveTaxi" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">没有</view>
				</view>
				<view class="lineOptionsRightIn lineOptionsRightIn2" @click="changeStatus('haveTaxi',true)">
					<image class="chooseIcon" v-if="haveTaxi" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">有，类型</view>
					<view class="lineOptionsInputBox">
						<input v-if="haveTaxi&&!isOpen" type="text" v-model="obj.vehicleType" class="lineOptionsInput">
						<view v-else class="lineOptionsInput">
							{{haveTaxi?obj.vehicleType:''}}
						</view>
					</view>
				</view>
			</view>
			<view class="lineOptionsRight"  v-if="haveTaxi">
				<view class="lineOptionsRightIn lineOptionsRightIn3">
					<view class="bottomOptionsTitle">车（船）登记证编号</view>
					<view class="lineOptionsInputBox lineOptionsInputBox2">
						<input v-if="haveTaxi&&!isOpen" type="text" v-model="obj.vehicleRegistrationCertificate" class="lineOptionsInput">
						<view v-else class="lineOptionsInput">
							{{haveTaxi?obj.vehicleRegistrationCertificate:''}}
						</view>
					</view>
				</view>
			</view>
			<picker mode="date" v-if="haveTaxi" :value="obj.vehiclePurchaseTime?obj.vehiclePurchaseTime.join('-'):''" @change="changeTaxiTime">
			<view class="lineOptionsRight">
				<view class="lineOptionsRightIn lineOptionsRightIn3">
					<view class="bottomOptionsTitle">购车时间</view>
					<image src="/static/timeIcon.png" class="timeIcon" mode=""></image>
					<view class="lineOptionsInputBox lineOptionsInputBox2">
						<view class="time">
							{{obj.vehiclePurchaseTime&&haveTaxi?obj.vehiclePurchaseTime[0]:''}}
						</view>
						<view class="timeDes">
							年
						</view>
						<view class="time">
							{{obj.vehiclePurchaseTime&&haveTaxi?obj.vehiclePurchaseTime[1]:''}}
						</view>
						<view class="timeDes">
							月
						</view>
						<view class="time">
							{{obj.vehiclePurchaseTime&&haveTaxi?obj.vehiclePurchaseTime[2]:''}}
						</view>
						<view class="timeDes">
							日
						</view>
					</view>
				</view>
			</view>
			</picker>
			<view  v-if="haveTaxi" class="lineOptionsRightIn lineOptionsRightIn3">
				
				<view class="bottomOptionsTitle">现估价</view>
				<view class="lineOptionsInputBox">
					<input v-if="haveTaxi" @input="checkInput($event,'vehicle')" type="digit" v-model="obj.vehicle" class="lineOptionsInput">
					<view v-else class="lineOptionsInput">
						
					</view>
					<view class="inputIcon">元</view>
					<view style="width:20rpx"></view>
				</view>
			</view>
		</view>
		<view class="lineOptionsBox2">
			<view class="lineOptionsTitle">大型农机</view>
			<view class="lineOptionsRight lineOptionsRight2">
				<view class="lineOptionsRightIn" @click="changeStatus('haveNongji',false)">
					<image class="chooseIcon" v-if="!haveNongji" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">没有</view>
				</view>
				<view class="lineOptionsRightIn lineOptionsRightIn2" @click="changeStatus('haveNongji',true)">
					<image class="chooseIcon" v-if="haveNongji" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">有，类型</view>
					<view class="lineOptionsInputBox">
						<input v-if="haveNongji&&!isOpen" type="text" v-model="obj.agriculturalMachineryType" class="lineOptionsInput">
						<view v-else class="lineOptionsInput">
							{{haveNongji?obj.agriculturalMachineryType:''}}
						</view>
					</view>
				</view>
			</view>
			<view class="lineOptionsRight"  v-if="haveNongji">
				<view class="lineOptionsRightIn lineOptionsRightIn3">
					<view class="bottomOptionsTitle">农机登记证编号</view>
					<view class="lineOptionsInputBox lineOptionsInputBox2">
						<input v-if="haveNongji&&!isOpen" type="text" v-model="obj.agriculturalMachineryRegistrationCertificate" class="lineOptionsInput">
						<view v-else class="lineOptionsInput">
							{{haveNongji?obj.agriculturalMachineryRegistrationCertificate:''}}
						</view>
					</view>
				</view>
			</view>
			
			<picker mode="date" v-if="haveNongji" :value="obj.agriculturalMachineryPurchaseTime?obj.agriculturalMachineryPurchaseTime.join('-'):''" @change="changeNongjiTime">
			<view class="lineOptionsRight">
				<view class="lineOptionsRightIn lineOptionsRightIn3">
					<view class="bottomOptionsTitle">购车时间</view>
					<image src="/static/timeIcon.png" class="timeIcon" mode=""></image>
					<view class="lineOptionsInputBox lineOptionsInputBox2">
						<view class="time">
							{{obj.agriculturalMachineryPurchaseTime&&haveNongji?obj.agriculturalMachineryPurchaseTime[0]:''}}
						</view>
						<view class="timeDes">
							年
						</view>
						<view class="time">
							{{obj.agriculturalMachineryPurchaseTime&&haveNongji?obj.agriculturalMachineryPurchaseTime[1]:''}}
						</view>
						<view class="timeDes">
							月
						</view>
						<view class="time">
							{{obj.agriculturalMachineryPurchaseTime&&haveNongji?obj.agriculturalMachineryPurchaseTime[2]:''}}
						</view>
						<view class="timeDes">
							日
						</view>
					</view>
				</view>
			</view>
			</picker>
			<view v-if="haveNongji" class="lineOptionsRightIn lineOptionsRightIn3">
				
				<view class="bottomOptionsTitle">现估价</view>
				<view class="lineOptionsInputBox">
					<input v-if="haveNongji" @input="checkInput($event,'agriculturalMachinery')" type="digit" v-model="obj.agriculturalMachinery" class="lineOptionsInput">
					<view v-else class="lineOptionsInput">
						
					</view>
					<view class="inputIcon">元</view>
					<view style="width:20rpx"></view>
				</view>
			</view>
		</view>
		
		<!-- <view class="button1" @click="save">
			提交
		</view> -->
		<view class="button" v-if="isSave == '0'" @click="save(true)">
			下一步
		</view>
		<view class="zhenchayuan">侦查员——{{user.nickName?user.nickName:user.userName}}</view>
		<view class="bottom"></view>
		<otherList @openChange="isOpenChange"/>
	</view>
</template>

<script>
	import otherList from '@/pages/components/otherInfoList.vue'
	import userInfo from '@/pages/components/userInfo.vue'
	export default {
		components:{
			otherList,userInfo
		},
		data(){
			return {
				isOpen:false,
				obj:{
					vehicle:"",
					vehicleType:"",
					vehicleRegistrationCertificate:"",
					vehiclePurchaseTime:"",
					agriculturalMachinery:"",
					agriculturalMachineryType:"",
					agriculturalMachineryRegistrationCertificate:"",
					agriculturalMachineryPurchaseTime:""
				},
				user:{},
				haveNongji:false,
				haveTaxi:false,
				isSave:'1',
				pageInfo:{
					pageName:'家庭财产情况2',
					pagePath:'/pages/kancha/familyMoneyInfoOne',
					pageIndex:8
				}
			}
		},
		onLoad() {
			this.isSave = uni.getStorageSync('isSave')
			this.user = uni.getStorageSync('user')
			this.getDetail()
		},
		
		methods:{
			checkInput(e,value) {
				setTimeout(()=>{
					this.obj[value] = this.$verifyMoney(e.detail.value);
					this.obj = JSON.parse(JSON.stringify(this.obj))
				},0)
			},
			// 表单验证
			verifyData(){
				let obj = this.obj
				// 验证车辆
				if(this.haveTaxi){
					if(this.$verifyEmpty(obj.vehicleType)){
						return {
							title:'车船类型不能为空',
							status:false
						}
					}
					if(this.$verifyEmpty(obj.vehicleRegistrationCertificate)){
						return {
							title:'车船登记证编号不能为空',
							status:false
						}
					}
					
					if(this.$verifyEmpty(obj.vehiclePurchaseTime)){
						return {
							title:'车辆船舶购买时间不能为空',
							status:false
						}
					} else {
						if(new Date().getTime()<new Date(obj.vehiclePurchaseTime.join('/'))){
							return {
								title:'车辆船舶购买时间不能大于当前时间',
								status:false
							}
						}
					}
					if(this.$verifyEmpty(obj.vehicle)){
						return {
							title:'车辆船舶估价不能为空',
							status:false
						}
					}
				}
				// 验证农机
				if(this.haveNongji){
					if(this.$verifyEmpty(obj.agriculturalMachineryType)){
						return {
							title:'农机类型不能为空',
							status:false
						}
					}
					if(this.$verifyEmpty(obj.agriculturalMachineryRegistrationCertificate)){
						return {
							title:'农机登记证编号不能为空',
							status:false
						}
					}
					
					if(this.$verifyEmpty(obj.agriculturalMachineryPurchaseTime)){
						return {
							title:'农机购买时间不能为空',
							status:false
						}
					} else {
						if(new Date().getTime()<new Date(obj.agriculturalMachineryPurchaseTime.join('/'))){
							return {
								title:'农机购买时间不能大于当前时间',
								status:false
							}
						}
					}
					if(this.$verifyEmpty(obj.agriculturalMachinery)){
						return {
							title:'农机估价不能为空',
							status:false
						}
					}
				}
				return {
					title:'验证通过',
					status:true
				}
			},
			changeStatus(type,status){
				this[type]=status
			},
			// 获取详情
			async getDetail(){
				uni.showLoading({
					title:'请稍等...'
				})
				let res = await this.$get('/app/bus/indexSituation?guaranteeNumber='+uni.getStorageSync('guaranteeNumber'),{})
				if(res.code == 200){
					let obj = res.data[0]
					Object.keys(obj).forEach(key=>{
						if(obj[key] === null){
							obj[key] = ''
						}
					})
					this.obj = obj
					// 有车辆
					obj.vehicle = obj.vehicle||0
					if(obj.vehicle||obj.vehicleType||obj.vehicleRegistrationCertificate||obj.vehiclePurchaseTime){
						this.haveTaxi = true
						if(obj.vehiclePurchaseTime){
							console.log(obj.vehiclePurchaseTime)
							obj.vehiclePurchaseTime = obj.vehiclePurchaseTime.split('-')
						}
					}
					// 有农机
					obj.agriculturalMachinery = obj.agriculturalMachinery||0
					if(obj.agriculturalMachinery||obj.agriculturalMachineryType||obj.agriculturalMachineryRegistrationCertificate||obj.agriculturalMachineryPurchaseTime){
						this.haveNongji = true
						if(obj.agriculturalMachineryPurchaseTime){
							obj.agriculturalMachineryPurchaseTime = obj.agriculturalMachineryPurchaseTime.split('-')
						}
					}
				}
				uni.hideLoading()
			},
			changeNongjiTime(e){
				this.obj.agriculturalMachineryPurchaseTime = e.target.value.split('-')
			},
			changeTaxiTime(e){
				this.obj.vehiclePurchaseTime = e.target.value.split('-')
			},
			async save(isLink){
				let result = this.verifyData()
				if(isLink){
					if(!result.status){
						uni.showModal({
							content: result.title,
							showCancel: false,
							confirmText: '确定'
						});
						return
					}
				}
				this.obj.guaranteeNumber = uni.getStorageSync('guaranteeNumber')
				let data = JSON.parse(JSON.stringify(this.obj))
				if(data.agriculturalMachineryPurchaseTime){
					data.agriculturalMachineryPurchaseTime = data.agriculturalMachineryPurchaseTime.join('-')
				}
				if(data.vehiclePurchaseTime){
					data.vehiclePurchaseTime = data.vehiclePurchaseTime.join('-')
				}
				if(!this.haveTaxi){
					data.vehicle=""
					data.vehicleType=""
					data.vehicleRegistrationCertificate=""
					data.vehiclePurchaseTime=""
				}
				if(!this.haveNongji){
					data.agriculturalMachinery=""
					data.agriculturalMachineryType=""
					data.agriculturalMachineryRegistrationCertificate=""
					data.agriculturalMachineryPurchaseTime=""
				}
				let res = await this.$post('/app/bus/updateSituation',data,false)
				if(res.code == 200){
					let pageStatus = uni.getStorageSync('pageStatus')
					if(result.status){
						pageStatus.familyMoneyInfoOne = {
							...this.pageInfo,
							status:true
						}
					} else {
						pageStatus.familyMoneyInfoOne = {
							...this.pageInfo,
							status:false
						}
					}
					uni.setStorageSync('pageStatus',pageStatus)
					if(isLink){
						this.link()
					} else {
						
					}
				}
			},
			// 基本信息开关
			isOpenChange(e){
				this.isOpen = e
				if(e){
					this.save(false)
				}
			},
			link(){
				uni.redirectTo({
					url:'/pages/kancha/familyMoneyInfoTwo'
				})
			}
		}
	}
</script>

<style scoped>
	.title{
		font-size: 36rpx;
		font-weight: 700;
		color:#fa5245;
		line-height:1;
		text-align:center;
		padding-bottom:20rpx;
		padding-top:50rpx;
	}
	.bigTitle{
		font-size:34rpx;
		text-align:center;
		margin-top:30rpx;
	}
	.lineOptionsBox{
		width:670rpx;
		border-radius:6rpx;
		border:1rpx solid #ccc;
		display:flex;
		align-items:center;
		height:86rpx;
		padding:0 40rpx;
		margin:0 auto;
		margin-top:30rpx;
		justify-content:space-between;
	}
	.lineOptionsBox2{
		width:670rpx;
		border-radius:6rpx;
		border:1rpx solid #ccc;
		padding:20rpx 40rpx;
		margin:0 auto;
		margin-top:30rpx;
	}
	.lineOptionsBox3{
		padding-left: 0;
	}
	.lineOptionsTitle,.inputIcon{
		color: #ccc;
	}
	.lineOptionsTitle1{
		padding-left: 40rpx;
	}
	.lineOptionsBox view,.lineOptionsBox input ,.lineOptionsBox2 input{
		font-size:26rpx;
	}
	.lineOptionsRight{
		display: flex;
		align-items:center;
	}
	.lineOptionsBox2 .lineOptionsRight{
		justify-content: space-between;
	}
	.lineOptionsRight1{
		flex: 1;
	}
	.lineOptionsRightIn{
		display: flex;
		align-items:center;
	}
	.lineOptionsRightIn2{
		margin-left: 50rpx;
	}
	.lineOptionsRightIn3{
		flex:1;
		margin-top: 20rpx;
	}
	.lineOptionsRightIn3 .lineOptionsInput{
		flex: 1;
	}
	.chooseIcon{
		width:28rpx;
		height:27rpx;
		margin-right: 20rpx;
	}
	.lineOptionsInputBox2{
		flex: 1;
	}
	.lineOptionsInputBox{
		width: 144rpx;
		display: flex;
		align-items:center;
		border-bottom:1rpx solid #333;
		margin-left:10rpx;
	}
	.lineOptionsInput{
		width: 100rpx;
		height: 40rpx;
		text-align: center;
	}
	.lineOptionsRight2{
		margin-top:20rpx;
	}
	.timeIcon{
		width:26rpx;
		height:25rpx;
		margin:0 10rpx;
	}
	.time{
		width: 100rpx;
		text-align: center;
	}
	.timeDes{
		color:#ccc
	}
	.sanjiao {
		width: 23rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}
	.button {
		width: 570rpx;
		line-height: 84rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 6rpx;
		background: linear-gradient(90deg, #fa5444, #ff988f);
		font-size: 28rpx;
		color: white;
	
	}
	
	.bottom {
		height: 160rpx;
	}
	.zhongdian{
		color: red;
		width: 40rpx;
		text-align: center;
	}
	.optionsBoxRight{
		display: flex;
		align-items: center;
	}
	.optionsBoxRight1{
		flex:1;		
	}
	.optionsBoxRightIn{
		display: flex;
		align-items: center;
		flex:1;
	}
	.optionsBoxRightIn1{
		/* margin-right: 50rpx; */
	}
	.optionsTitle{
		display: flex;
		align-items: center;
	}
	.optionsTitleIn{
		color:#ccc;
		width: 180rpx;
	}
	.optionsBox{
		display: flex;
		margin-top: 20rpx;
		align-items: flex-start;
	}
	.optionsBox1{
		margin-top: 40rpx;
	}
	.chooseIconFrist{
		margin-left: 50rpx;
	}
	.chooseIcon1{
		margin-left: 20rpx;
	}
	.pingfangmi{
		color: #ccc;
	}
	.pingfangmi text{
		display: inline-block;
		font-size: 18rpx;
		color:#ccc;
		position: relative;
		transform: translateY(-10rpx);
	}
	.bottomOptionsTitle1{
		width: 144rpx;
	}
	.lineOptionsInputBox1{
		flex:1;
	}
	.lineOptionsInputBox1 .lineOptionsInput{
		flex:1;
	}
	.button1{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:#656668;
		font-size:28rpx;
		color:white;
	}
	.button{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:linear-gradient(90deg,#fa5444,#ff988f);
		font-size:28rpx;
		color:white;
		
	}
	.zhenchayuan{
		font-size: 24rpx;
		color:#ccc;
		margin-top: 20rpx;
		text-align: center;
	}
	.bottom{
		height:160rpx;
	}
	.topTitleBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 90rpx;
	}
	.listTiteBox {
		position: relative;
	}
	
	.listTitleBackground {
		height: 16rpx;
		width: 120rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background: linear-gradient(-90deg, #ffd356, #ffffff)
	}
	.listTitle{
		font-size:38rpx;
		position: relative;
	}
	.right {
		width: 34rpx;
		height: 34rpx;
		position: relative;
		transition: all 0.3s;
	}
	.childrenBox{
		width: 600rpx;
		margin: 0 auto;
		height: 0;
		position: relative;
		transition: all 0.3s;
		overflow: hidden;
	}
	.childrenOptionsBox{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.childrenOptionsTitle{
		font-size: 26rpx;
		line-height: 30rpx;
		color: #ccc;
	}
	.childrenOptionsDes{
		font-size: 26rpx;
		line-height: 30rpx;
		width: 450rpx;
		text-align: right;
	}
	.rightOpen{
		transform: rotate(90deg);
	}
	.line1{
		height: 20rpx;
		background-color: #efefef;
	}
	.otherInfo{
		width: 200rpx;
		line-height:70rpx;
		text-align: center;
		font-size: 24rpx;
		color:white;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #3b3b3b;
		position: fixed;
		right: 0;
		top:460rpx;
		font-family: '黑体';
	}
</style>
